<template>
    <div class="order_info_box" v-loading.fullscreen.lock="fullscreenLoading">
        <div class="crumbs">当前位置：<span @click="$router.push({name: 'home'})">首页></span> <span
            @click="$router.push({name: 'userInfo'})">个人中心></span>
            <span @click="$router.push({name: 'orderList'})">我的订单></span>订单详情
        </div>
        <div class="box_inner">
            <div class="lefts">
                <div class="left_item">
                    <div class="name">订单号：</div>
                    <div class="info_num">{{ orderInfo.order_number }}</div>
                </div>
                <div class="left_item">
                    <div class="name">下单时间：</div>
                    <div class="info_num">{{ orderInfo.create_time }}</div>
                </div>
                <div class="left_item">
                    <div class="name">订单状态：</div>
                    <div class="time_info">{{ orderInfo.status_info }} <span></span>
                        <template v-if="orderInfo.status==6 && orderInfo.deliver_status == 3">
                            还剩
                            <van-count-down :time="orderInfo.auto_confirm" format="DD 天 HH 时 mm 分 ss 秒"/>
                            自动确认收货
                        </template>
                    </div>
                </div>
            </div>
            <div class="reight" v-if="orderInfo.status>1">
                <div class="name">收款账户信息</div>
                <div class="nouther">
                    <div class="name_title">线下支付账户：{{ contract.bank }}</div>
                    <div class="number">{{ contract.account }}</div>
                </div>
            </div>
        </div>
        <div class="prdouct">
            <div class="char_times">产品：</div>
            <div class="box_chang_fun">
                <div class="char_info_tabs" v-for="(item,index) in goodsList" :key="index">
                    <div class="info_tab_chang">
                        <div class="goods_img">
                            <img :src="item.goods_image">
                        </div>
                        <div class="name_txt">{{ item.goods_name }}</div>
                        <div class="txt">{{ item.num }}({{ item.unit }})</div>
                        <div class="moneys">单品总价：￥{{ item.all_price }}</div>
                        <div class="box_num_btn" v-if="orderInfo.status==5 && item.delivered==0">待发货</div>
                        <div class="box_num_btn_one" v-if="item.delivered<item.num && item.delivered  && orderInfo.status==5">
                            部分已发货
                        </div>
                        <div class="box_num_btn_one" v-if="orderInfo.status>=6">已发货</div>
                        <div class="nums" v-if="item.delivered<item.num && item.delivered  && orderInfo.status==5">（{{ item.delivered }}/{{ item.num }}）</div>
                    </div>
                    <div class="num_fou_car_tab">
                        <div class="tab_infos_model">
                            <div>型号：{{ item.goods_model }}</div>
                            <div>单价：￥{{ item.goods_price }}</div>
                        </div>
                        <!--            <div style="transform: translateX(-26px)">-->
                        <!--              <div style="margin-bottom:5px">承运单位：顺丰物流</div>-->
                        <!--              <div>运单号：1542176321767348</div>-->
                        <!--            </div>-->
                    </div>
                    <div v-if="index!=goodsList.length-1" class="line_shwer"></div>
                </div>
            </div>
        </div>
        <div class="price_box">
            <div>订单价格：<span>{{orderInfo.old_price}}</span></div>
            <div>报价折扣：<span>{{(orderInfo.old_price * orderInfo.dis / 100).toFixed(2) }}({{ orderInfo.dis }}%)</span></div>
            <div>报价折后价：<span>{{ orderInfo.price }}</span></div>
            <div>销售确认折扣：<span>{{(orderInfo.price * orderInfo.sale_dis / 100).toFixed(2) }}({{ orderInfo.sale_dis ? orderInfo.sale_dis : "0.0" }}%)</span>
            </div>
            <div>销售确认折后价格：<span v-if="orderInfo.sale_price">{{parseFloat(orderInfo.sale_price).toFixed(2) }}</span><span v-else>{{orderInfo.price}}</span></div>
        </div>
        <div class="order_box">
            <div class="address" v-if="orderInfo.address_info">
                <div class="item_add">
                    <div class="name_box">收货地址：姓名：</div>
                    <div class="box_netr">{{ orderInfo.address_info.name }}</div>
                </div>
                <div class="item_add">
                    <div class="name_box">电话：</div>
                    <div class="box_netr">{{ orderInfo.address_info.phone }}</div>
                </div>
                <div class="item_add">
                    <div class="name_box">收货座机：</div>
                    <div class="box_netr">{{ orderInfo.address_info.landline }}</div>
                </div>
                <div class="item_add">
                    <div class="name_box">收货地址：</div>
                    <div class="box_netr">
                        {{ orderInfo.address_info.pro_name }}{{ orderInfo.address_info.city_name }}{{
                        orderInfo.address_info.address
                        }}
                    </div>
                </div>
                <div class="item_box_mark">备注：<span style="color: #B11E24;font-size: 12px">{{orderInfo.remarks||"无"}}</span></div>
            </div>
            <div class="in_voice" v-if="orderInfo.invoice_info">
                <div style="margin-bottom: 10px">开票信息：
                    <template v-if="orderInfo.invoice_info.type==1">个人</template>
                    <template v-if="orderInfo.invoice_info.type==2">企业（普票）</template>
                    <template v-if="orderInfo.invoice_info.type==3">企业（专票）</template>
                    <template v-if="orderInfo.invoice_info.type==4">企业（电子普票）</template>
                </div>
                <div class="in_voice_item">
                    <div class="box_title">单位名称：</div>
                    <div>{{ orderInfo.invoice_info.title }}</div>
                </div>
                <template v-if="orderInfo.invoice_info.type!=1">
                    <div class="in_voice_item">
                        <div class="box_title">税号：</div>
                        <div>{{ orderInfo.invoice_info.code }}</div>
                    </div>
                    <div class="in_voice_item">
                        <div class="box_title">注册地址：</div>
                        <div>{{ orderInfo.invoice_info.register_address }}</div>
                    </div>
                    <div class="in_voice_item">
                        <div class="box_title">开户银行：</div>
                        <div>{{ orderInfo.invoice_info.bank_name }}</div>
                    </div>
                    <div class="in_voice_item">
                        <div class="box_title">银行账号：</div>
                        <div>{{ orderInfo.invoice_info.bank_code }}</div>
                    </div>
                    <div class="in_voice_item">
                        <div class="box_title">注册电话：</div>
                        <div>{{ orderInfo.invoice_info.register_tel }}</div>
                    </div>
                </template>
                <div class="in_voice_item" v-if="orderInfo.invoice_info.type==1 || orderInfo.invoice_info.type==4">
                    <div class="box_title">邮箱：</div>
                    <div>{{ orderInfo.invoice_info.email }}</div>
                </div>
                <div class="in_voice_item">
                    <div class="box_title">收票地址：</div>
                    <div>{{ orderInfo.invoice_info.address }}</div>
                </div>
            </div>
            <div class="car_btns">{{ orderInfo.invoice_status_name }}</div>
        </div>
        <order-waybill v-if="orderInfo.status >= 5" :waybill="waybill"></order-waybill>
        <div class="other_box" v-if="orderInfo.status==5 || orderInfo.status==6">
            <div>操作：</div>
            <div @click="deliverGoods">确认收货</div>
        </div>
        <div class="btn_box_infos">
            <div @click="$router.replace({name: 'orderList'})">返回</div>
            <div v-if="contract.show_url" @click="openContract">查看合同</div>
            <div v-if="orderInfo.status>4" @click="shipmentBatten">收货单</div>
        </div>
        <transition name="slide-fade">
            <div class="city_location_box" v-if="receivingShow">
                <div class="location_box">
                    <div class="tips_title">确认收货</div>
                    <div class="line"></div>
                    <img @click="receivingShow=false" src="../assets/window-icon-close-black.png" class="close">
                    <div class="content_box_infos">确认所有商品已收到货</div>
                    <div class="tips_btn">
                        <div @click="receivingShow=false">取消</div>
                        <div style="width: 82px" @click="confirmReceipt">确认收货</div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="slide-fade">
            <div class="city_location_box" v-if="receiptShow">
                <div class="location_box" style="width: 680px">
                    <div class="tips_title">确认收货</div>
                    <div class="line" style="margin-bottom: 23px;width: 100%"></div>
                    <img @click="receiptShow=false" src="../assets/window-icon-close-black.png" class="close">
                    <template v-if="shipmentList.length">
                        <div class="tips_receipt_title">确认下列商品已收到货</div>
                        <div v-for="(item,index) in shipmentList" :key="index">
                            <div class="batch_receipt_content">
                                <div class="receipt_content_list">
                                    <div class="list_infos_content" v-for="(items,indexs) in item.child" :key="indexs">
                                        <div class="product_box">
                                            <div class="product_img_box">
                                                <img :src="items.goods_image">
                                            </div>
                                            <div class="product_infos_contents">
                                                <div class="product_infos_tips_name">
                                                    <div class="nemes_infos">{{ items.goods_name }}</div>
                                                    <div class="modles_infos">x {{ items.num }}（{{ items.unit }}）</div>
                                                </div>
                                                <div class="models_txt">型号：{{ items.goods_model }}</div>
                                            </div>
                                        </div>
                                        <div class="prfou_lin_list" v-if="indexs<item.child.length-1"></div>
                                    </div>
                                </div>
                                <div class="logistics_box">
                                    <div style="margin-bottom:5px">承运单位：{{ item.logistics_company }}</div>
                                    <div>运单号：{{ item.logistics_order }}</div>
                                </div>
                            </div>
                            <div class="tips_btn">
                                <div @click="receiptShow=false">取消</div>
                                <div style="width: 82px" @click="confirmBatchReceipt(item.id)">确认收货</div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div style="text-align: center">当前订单还未发货，请联系对应的销售人员及时发货</div>
                    </template>
                </div>
            </div>
        </transition>
        <transition name="slide-fade">
            <div class="city_location_box" v-if="shipmentShow">
                <div class="location_box" style="width: 680px">
                    <div class="tips_title">收货单</div>
                    <div class="line" style="margin-bottom: 23px;width: 100%"></div>
                    <img @click="shipmentShow=false" src="../assets/window-icon-close-black.png" class="close">
                    <div class="batch_receipt_content">
                        <template v-if="shipmentList.length">
                            <div v-for="(item,index) in shipmentList" :key="index">
                                <div class="receipt_content_list">
                                    <div class="list_infos_content" v-for="(items,indexs) in item.child" :key="indexs">
                                        <div class="product_box">
                                            <div class="product_img_box">
                                                <img :src="items.goods_image">
                                            </div>
                                            <div class="product_infos_contents">
                                                <div class="product_infos_tips_name">
                                                    <div class="nemes_infos">{{ items.goods_name }}</div>
                                                    <div class="modles_infos">x {{ items.num }}（{{ items.unit }}）</div>
                                                </div>
                                                <div class="models_txt">型号：{{ items.goods_model }}</div>
                                            </div>
                                        </div>
                                        <div class="prfou_lin_list" v-if="indexs<item.child.length-1"></div>
                                    </div>
                                </div>
                                <div class="logistics_box">
                                    <div style="margin-bottom:5px">承运单位：{{ item.logistics_company }}</div>
                                    <div>运单号：{{ item.logistics_order }}</div>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div style="text-align: center">当前订单还没有收货记录，请收货后再次查看</div>
                        </template>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import {confirmOrder, confirmShipment, getOrderDetail, getShipmentList} from "@/api/apis";
    import OrderWaybill from "./order/OrderWaybill";

    export default {
        name: "orderIndo",
        components: {OrderWaybill},
        data() {
            return {
                orderInfo: {},
                goodsList: [],
                id: '',
                delivery_time: '',
                receivingShow: false,
                receiptShow: false,
                shipmentShow: false,
                fullscreenLoading: false,
                shipmentList: [],
                contract: {},
                waybill: []
            }
        },
        computed: {
            notDisPrice() {
                let notDisPriceCount = 0;
                for (let i in this.goodsList) {
                    let item = this.goodsList[i];
                    notDisPriceCount += parseFloat(item.not_dis_price * item.num);
                }
                return parseFloat(notDisPriceCount).toFixed(2);
            }
        },
        mounted() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
            }
            this.GetOrderDetail()
        },
        methods: {
            openContract() {
                window.open(this.contract.show_url)
            },
            shipmentBatten() {
                this.shipmentShow = true
                this.GetShipmentList(2)
            },
            GetShipmentList(status) {
                this.fullscreenLoading = true
                let data = {
                    order_id: this.id,
                    status: status
                }
                getShipmentList(data).then(res => {
                    this.shipmentList = res.data.data
                    this.fullscreenLoading = false
                })
            },
            deliverGoods() {
                if (this.orderInfo.status == 5) {
                    this.receiptShow = true
                    this.GetShipmentList(1)
                } else {
                    this.receivingShow = true
                }
            },
            GetOrderDetail() {
                let data = {id: this.id}
                getOrderDetail(data).then(res => {
                    this.orderInfo = res.data.order
                    this.goodsList = res.data.goods
                    this.contract = res.data.contract
                    let newDate = new Date(res.data.order.delivery_time)
                    let oldDate = new Date()
                    this.delivery_time = newDate.getTime() - oldDate.getTime()
                    if (this.orderInfo.status >= 5) {
                        this.waybill = res.data.waybill;
                    }
                })
            },
            confirmReceipt() {
                let data = {
                    id: this.id
                }
                confirmOrder(data).then(() => {
                    this.$message.success('收货成功')
                    this.receivingShow = false
                    this.GetOrderDetail()
                })
            },
            confirmBatchReceipt(e) {
                let data = {
                    id: e
                }
                confirmShipment(data).then(() => {
                    this.$message.success('收货成功')
                    this.GetOrderDetail()
                    this.GetShipmentList(1)
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .order_info_box {
        padding: 22px 0 91px;
        min-height: cala(100vh - 113px);
        width: 1200px;
        cursor: pointer;
        margin: 0 auto;
        
        .crumbs {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 17px;
            color: #000000;
            margin-bottom: 29px;
        }
        
        .box_inner {
            display: flex;
            justify-content: space-between;
            
            .lefts {
                .left_item {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    margin-bottom: 22px;
                    
                    .name {
                        width: 80px;
                        font-size: 14px;
                        text-align: right;
                    }
                    
                    .time_info {
                        display: flex;
                        color: #B11E24;
                        
                        span {
                            margin-right: 12px;
                        }
                    }
                }
            }
            
            .reight {
                .name {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    margin-bottom: 10px;
                }
                
                .nouther {
                    padding: 8px 11px;
                    box-sizing: border-box;
                    border: 1px solid #000000;
                    width: calc(327px - 22px);
                    
                    .name_title {
                        font-size: 12px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        line-height: 24px;
                        color: #000000;
                        margin-bottom: 5px;
                    }
                    
                    .number {
                        font-size: 18px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                        white-space: pre-wrap;
                    }
                }
            }
        }
        
        .prdouct {
            display: flex;
            margin-left: 28px;
            
            .char_times {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
            }
            
            .box_chang_fun {
                width: 95%;
                
                .char_info_tabs {
                    margin-bottom: 20px;
                    
                    .info_tab_chang {
                        display: flex;
                        align-items: center;
                        
                        .goods_img {
                            width: 89px;
                            margin-right: 5px;
                            height: 62px;
                            
                            img {
                                width: 62px;
                                object-fit: contain;
                                height: 62px;
                            }
                        }
                        
                        .name_txt {
                            width: 339px;
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            line-height: 20px;
                            color: #000000;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 3;
                            overflow: hidden;
                            white-space: pre-wrap;
                            word-break: break-all;
                        }
                        
                        .txt {
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #000000;
                            margin: 0 110px 0 40px;
                        }
                        
                        .moneys {
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #000000;
                            margin-right: 53px;
                        }
                        
                        .box_num_btn {
                            width: 76px;
                            height: 30px;
                            background: #FFFFFF;
                            border: 1px solid #B11E24;
                            box-sizing: border-box;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            line-height: 30px;
                            color: #B11E24;
                            text-align: center;
                        }
                        
                        .box_num_btn_one {
                            margin: 0 9px 0 40px;
                            width: 99px;
                            height: 30px;
                            background: #FFFFFF;
                            border: 1px solid #B11E24;
                            box-sizing: border-box;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            line-height: 30px;
                            color: #B11E24;
                            text-align: center;
                        }
                        
                        .nums {
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            line-height: 28px;
                            color: #000000;
                        }
                    }
                    
                    .num_fou_car_tab {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 12px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                        margin-left: 94px;
                        
                        .tab_infos_model {
                            display: flex;
                            
                            div:nth-child(1) {
                                margin-right: 32px;
                            }
                        }
                    }
                    
                    .line_shwer {
                        width: 478px;
                        height: 0px;
                        margin-top: 19px;
                        border-bottom: 1px solid #C7C7C7;
                    }
                }
            }
            
        }
        
        .price_box {
            margin-bottom: 23px;
            padding: 0 20px;
            height: 42px;
            background: #EFEFEF;
            display: flex;
            align-items: center;
            
            div {
                margin-right: 50px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                
                span {
                    font-size: 12px;
                }
            }
        }
        
        .order_box {
            display: flex;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            
            .address {
                .item_add {
                    display: flex;
                    margin-bottom: 10px;
                    
                    .name_box {
                        width: 118px;
                        text-align: right;
                    }
                    
                    .box_netr {
                        width: 178px;
                    }
                }
                
                .item_box_mark {
                    margin-left: 28px;
                    margin-top: 100px;
                }
            }
            
            .in_voice {
                margin-left: 31px;
                
                .in_voice_item {
                    display: flex;
                    margin-bottom: 10px;
                    
                    div:nth-child(2) {
                        width: 178px;
                    }
                    
                    .box_title {
                        width: 140px;
                        text-align: right;
                    }
                }
                
            }
            
            .car_btns {
                width: 76px;
                height: 30px;
                background: #FFFFFF;
                border: 1px solid #B11E24;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 30px;
                text-align: center;
                color: #B11E24;
                margin-left: 57px;
            }
        }
        
        .other_box {
            margin-top: 7px;
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-left: 28px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            
            div:nth-child(2) {
                width: 83px;
                height: 30px;
                background: #B11E24;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 30px;
                color: #FFFFFF;
                text-align: center;
            }
        }
        
        .btn_box_infos {
            display: flex;
            align-items: center;
            margin-left: 70px;
            margin-top: 30px;
            
            div:nth-child(1) {
                width: 68px;
                height: 30px;
                background: #B11E24;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 30px;
                text-align: center;
                color: #FFFFFF;
                margin-right: 10px;
            }
            
            div:nth-child(2) {
                width: 83px;
                height: 30px;
                background: #000000;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 30px;
                color: #FFFFFF;
                text-align: center;
            }
            
            div:nth-child(3) {
                width: 83px;
                height: 30px;
                background: #000000;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 30px;
                color: #FFFFFF;
                margin-left: 10px;
                text-align: center;
            }
        }
    }
    
    .city_location_box {
        position: fixed;
        cursor: pointer;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.21);
        left: 0;
        bottom: 0;
        z-index: 5;
        
        .location_box {
            width: 480px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #9D9D9D;
            padding: 32px 0 28px;
            z-index: 6;
            background: #FFFFFF;
            
            .tips_title {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                margin-bottom: 17px;
                text-align: center;
            }
            
            .line {
                width: 477px;
                height: 2px;
                background: #E9E9E9;
                //border: 1px solid #E9E9E9;
                box-sizing: border-box;
                margin-bottom: 37px;
            }
            
            .content_box_infos {
                padding: 0 13px;
                margin-bottom: 27px;
                text-align: center;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
            }
            
            .tips_btn {
                display: flex;
                align-items: center;
                justify-content: center;
                
                div {
                    width: 69px;
                    height: 30px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 30px;
                    text-align: center;
                }
                
                div:nth-child(1) {
                    border: 1px solid #C7C7C7;
                    color: #9D9D9D;
                    box-sizing: border-box;
                    margin-right: 10px;
                }
                
                div:nth-child(2) {
                    width: 106px;
                    color: #FFFFFF;
                    background: #B11E24;
                }
            }
            
            .close {
                width: 18px;
                height: 18px;
                position: absolute;
                z-index: 7;
                right: 10px;
                cursor: pointer;
                top: 10px;
            }
            
            .tips_receipt_title {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                margin-bottom: 20px;
                text-align: center;
            }
            
            .batch_receipt_content {
                
                
                .receipt_content_list {
                    max-height: 300px;
                    overflow: scroll;
                    border: none;
                    background: #F7F7F7;
                    margin-bottom: 21px;
                    padding: 36px 53px 4px;
                    
                    .list_infos_content {
                        width: 100%;
                        margin-bottom: 23px;
                        
                        .product_box {
                            margin-bottom: 19px;
                            display: flex;
                            align-items: flex-start;
                            
                            .product_img_box {
                                width: 89px;
                                height: 62px;
                                text-align: center;
                                
                                img {
                                    width: 62px;
                                    height: 100%;
                                    object-fit: contain;
                                }
                            }
                            
                            .product_infos_contents {
                                .product_infos_tips_name {
                                    display: flex;
                                    align-items: center;
                                    
                                    .nemes_infos {
                                        width: 339px;
                                        font-size: 12px;
                                        height: 57px;
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                        line-height: 20px;
                                        color: #000000;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 2;
                                        -webkit-box-orient: vertical;
                                        margin-right: 40px;
                                    }
                                    
                                    .modles_infos {
                                        font-size: 12px;
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                        color: #000000;
                                    }
                                }
                                
                                .models_txt {
                                    font-size: 12px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #000000;
                                    margin-top: 24px;
                                }
                            }
                        }
                        
                        .prfou_lin_list {
                            width: 478px;
                            border-bottom: 1px solid #C7C7C7;
                            margin-left: 46px;
                        }
                    }
                }
                
                .logistics_box {
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    padding: 0 53px;
                    margin-bottom: 34px;
                }
                
                .receipt_content_list::-webkit-scrollbar { /*滚动条整体样式*/
                    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                }
                
                .receipt_content_list::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
                    border-radius: 10px;
                    background: #535353;
                }
                
                .receipt_content_list::-webkit-scrollbar-track { /*滚动条里面轨道*/
                    border-radius: 10px;
                    background: #EDEDED;
                }
            }
            
        }
        
        
    }
</style>
